<template>
  <Modal title="规程详情预览" v-model="isShow" class="modal-img-view" :mask-closable="false" :closable="false">
    <Row class="center">
      <Button @click="changePdfPage(0)" type="primary" :disabled="currentPage === 1" class="float-l">上一页</Button>
      <span class="p-page">{{currentPage}} / {{content.num}}</span>
      <Button @click="changePdfPage(1)" type="primary" :disabled="currentPage === content.num" class="float-r">下一页</Button>
    </Row>
    <pdf :src="content.url"
         :page="currentPage"
         @num-pages="content.num=$event"
         @page-loaded="currentPage=$event"
         @loaded="loadPdfHandler"
    ></pdf>
    <div slot="footer">
      <Button @click="cancel">取消</Button>
    </div>
  </Modal>
</template>

<script>
  import pdf from 'vue-pdf'

  export default {
      props:{
        content:{
          type:Object,
          default:{}
        },
        isShow:{
          type:Boolean,
          default: false
        }
      },
      components:{
         pdf
      },
      watch:{
        content(val){
          // console.log(val,'val')
        }
      },
      data(){
        return{
          currentPage:1,
          trick:false
        }
      },
      methods:{
        changePdfPage (val) {
          if (val === 0 && this.currentPage > 1) {
            this.currentPage--
          }
          if (val === 1 && this.currentPage < this.content.num) {
            this.currentPage++
          }
        },
        // pdf加载时
        loadPdfHandler (e) {
          this.currentPage = 1 // 加载的时候先加载第一页
        },
        cancel() {
          this.$emit('cancel',false)
        }


      }
    }
</script>

<style scoped>
.p-page {
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
}
</style>
